<template>
	<view class="tab-box">
		<view class="flex justify-around items-center h-100">
			<view class="flex flex-col items-center" :class="setClass(item.url)" v-for="item in tabList" :key="item.url"
				@click="$System.goTo(`/${item.url}`,{},{method: 'reLaunch'})">
				<u-icon :name="item.icon" custom-prefix="custom-icon" size="36" />
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'
	import {
		strToArr
	} from '@/common/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'

	const currentPath = ref()

	const tabList = computed(() => {
		let agent = [{
			name: '首页',
			icon: 'home',
			url: 'pages/home/index'
		}, {
			name: '报表',
			icon: 'baobiaotongji',
			url: 'pages/report/index'
		}, {
			name: '我的',
			icon: 'wode',
			url: 'pages/my/index'
		}]
		let mchTab = [{
			name: '首页',
			icon: 'home',
			url: 'pages/mch-home/index'
		}, {
			name: '报表',
			icon: 'baobiaotongji',
			url: 'pages/report-mch/index'
		}, {
			name: '我的',
			icon: 'wode',
			url: 'pages/my/index'
		}]
		return useUserStore().userType == 2 ? agent : mchTab
	})
	const setClass = (data) => {
		let val = strToArr(currentPath.value, '/')[1]
		return data.includes(val) ? 'mark' : ''
	}

	// 获取当前页路径
	const getCurrentPath = () => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const path = currentPage.route; // 页面路径
		const query = currentPage.options; // 参数
		currentPath.value = path
	}

	onLoad((opt) => {})
	onShow(() => {
		getCurrentPath()
	})
</script>

<style>
	.tab-box {
		color: #999999;
		height: var(--tabHeight);
		height: calc(var(--tabHeight) + constant(safe-area-inset-bottom));
		height: calc(var(--tabHeight) + env(safe-area-inset-bottom));

		position: fixed;
		width: 100vw;
		bottom: 0;
		background-color: #fff;
		z-index: 80;
		border-top: rgba(206, 204, 202, 1) solid 1rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.mark {
		color: var(--maiColor);
	}
</style>